<template>
  <div class="menu">
    <div class="header">
      <div class="title">
        <!-- <i class="iconfont iconyibaozhifulogo"></i> -->
        <img class="logo" src="../../assets/images/logo.png" />
        微网付
      </div>
      <div class="user">
        <transition name="el-fade-in-linear">
          <div class="screen">
            <i v-if="isScreen" @click="openOrCloseScreen()" class="iconfont iconopen"></i>
            <i v-else @click="openOrCloseScreen()" class="iconfont iconguanbiquanping-copy"></i>
          </div>
        </transition>
        <el-tooltip
          v-if="getUser.name.length>5"
          effect="dark"
          :content="getUser.name"
          placement="bottom"
        >
          <div class="name">{{getUser.name}}</div>
        </el-tooltip>
        <div v-else class="name">{{getUser.name}}</div>
        <el-dropdown @command="operation">
          <el-button type="primary" size="small">操作</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changePsd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div :class="'nav '+[showMenu?'hidden-nav':'']">
      <transition name="el-zoom-in-center">
        <el-menu
          :collapse="showMenu"
          :default-active="defaultActive"
          class="nav-menu"
          background-color="#fff"
          text-color="#909399"
          active-text-color="#000"
          :unique-opened="true"
          @select="selectMenu"
          :collapse-transition="true"
        >
          <items
            :showMenu="showMenu"
            :menu="item"
            :index="item.path"
            v-for="item in getMenu"
            :key="item.id"
          />
        </el-menu>
      </transition>
    </div>
    <div :class="'router '+[showMenu?'show-menu':'is-show-menu']">
      <i
        v-if="showMenu"
        @click="menuShowOrHiddden(false)"
        class="iconfont iconshouqicaidan-copy"
        style="cursor:pointer"
      ></i>
      <i
        v-else
        @click="menuShowOrHiddden(true)"
        class="iconfont iconshouqicaidan"
        style="cursor:pointer"
      ></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="navList.length-1 ===index?{path}:{}"
          v-for="({title,path},index) in navList"
          :key="index"
        >{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="routerList.length" :class="'router '+[showMenu?'show-menu':'is-show-menu']">
      <el-tag
        class="tag"
        :type="currentRoute ===route.path?'':'info'"
        v-for="(route,index) in routerList"
        :key="route.path"
        closable
        @close="deleteRoute(route,index)"
        @click="toRoute(route)"
      >{{route.title}}</el-tag>
    </div>
    <div :class="'content '+[showMenu?'show-menu':'is-show-menu']">
      <transition name="el-zoom-in-center">
        <!-- 最多缓存keepLength个 -->
        <keep-alive :max="keepLength">
          <router-view />
        </keep-alive>
      </transition>
    </div>
    <!-- 修改密码弹窗 -->
    <changePassword ref="psd" />
    <!-- 回到顶部 -->
    <el-backtop target=".content" :visibility-height="100" :right="50" :bottom="50"></el-backtop>
  </div>
</template>

<script>
import items from './component/menu/menu'
import changePassword from './component/menu/change-password'
import { mapGetters, mapMutations } from 'vuex'
import { logout, changePsd } from '@/api/login'
import { storge, logOut, check, menu } from '@/utils'

export default {
  components: {
    items,
    changePassword
  },
  data() {
    return {
      radio: '展开',
      showMenu: false,
      isCollapse: true,
      isScreen: true,
      defaultActive: '',
      getUser: storge.getSessionStorage('user') || {}
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters({
      getMenu: 'getMenu',
      navList: 'getNavList',
      routerList: 'getRouterList',
      keepLength: 'getKeepLength'
    }),
    currentRoute() {
      return this.$route.path
    }
  },
  beforeMount() {
    const { path } = this.$route
    this.defaultActive = path
  },
  mounted() {
    console.log(this.$route.matched)
    console.log(this.$router.options)
    // 页面初始化监听屏幕变化
    document.onfullscreenchange = () => {
      this.isScreen = document.fullscreenElement ? false : true
    }
  },
  destroyed() {
    // 清除监听屏幕变化事件
    document.onfullscreenchange = null
  },
  methods: {
    ...mapMutations({
      deleteRouteList: 'DELETE_ROUTERLIST'
    }),
    // 菜单显示或者隐藏
    menuShowOrHiddden(value) {
      this.showMenu = value
    },
    // 选中菜单
    selectMenu(path) {
      this.$router.push({
        path
      })
    },
    // 路由跳转
    toRoute({ path }) {
      if (path !== this.currentRoute) {
        this.defaultActive = path
        this.$router.push({ path })
      }
    },
    // 删除路由
    deleteRoute({ path }, index) {
      if (path !== this.currentRoute) {
        this.deleteRouteList(index)
      }
    },
    // 开启 || 关闭全屏模式
    openOrCloseScreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        document.documentElement.requestFullscreen()
      }
    },
    // 退出
    signOut() {
      this.$confirm('确认退出登录吗?', '退出操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          logout().then(() => {
            logOut.clearData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 用户操作（退出 || 修改密码）
    operation(value) {
      if (value === 'logout') {
        this.signOut()
      } else if (value === 'changePsd') {
        this.$refs.psd.openDialog()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.menu {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .header {
    display: flex;
    padding: 0 25px;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    color: #fff;
    height: 60px !important;
    background: rgb(43, 127, 211);
    .title,
    .user {
      height: 100%;
      min-width: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .screen {
        cursor: pointer;
      }
    }
    .title {
      font-size: 24px;
      font-weight: 600;
      .logo {
        width: 36px;
        height: 30px;
      }
    }
    .user {
      font-size: 14px;
      width: 150px;
      display: flex;
      justify-content: space-between;
    }
  }
  .nav,
  .content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nav {
    position: fixed;
    left: 0;
    top: 60px;
    height: 93.7%;
    width: 190px;
    .nav-menu {
      width: 100%;
      height: 100%;
    }
  }

  .hidden-nav {
    width: 50px;
  }

  .is-show-menu {
    margin-left: 190px;
  }
  .show-menu {
    margin-left: 50px;
  }
  .router,
  .content {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    width: auto;
    padding: 20px;
    box-sizing: border-box;
    height: 4vh;
  }
  .router {
    display: flex;
    min-width: 200px;
    overflow-y: hidden;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
    box-sizing: border-box;
    background: #fff;
    .tag {
      cursor: pointer;
      margin-right: 8px !important;
    }
  }
  .content {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    height: 90%;
    background: #fff;
    overflow-y: auto;
  }
}
</style>

